<!--
 * @Description: 插槽左右最基础布局
 * @author:张捉妖师
-->
<template>
  <div class="staff-manage">
    <!-- 添加删除公用组件使用 -->
    <slot name="zhactbar"></slot>
    <slot v-if="$slots.farmtypeselectslot" name="farmtypeselectslot"></slot>
    <div ref="commonLayout" class="common-layout">
      <!-- 搜索行 -->
      <div v-if="$slots.searchbox" class="searchbox">
        <slot name="searchbox"></slot>
      </div>
      <!-- 其他内容 -->
      <slot name="dig"></slot>
      <!-- 主要区域 -->
      <div class="content">
        <!-- 左侧表格区 -->
        <div class="box-left">
          <slot name="boxleft"></slot>
        </div>
        <!-- 右侧列表区 -->
        <div class="box-right">
          <slot name="boxright"></slot>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      screenHeight: document.body.clientHeight
    };
  },
  watch: {
    screenHeight(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenHeight = val;
        this.timer = true;
        let that = this;
        // that.jisuanheight()
        setTimeout(function() {
          // 打印screenWidth变化的值
          that.jisuanheight();
          that.timer = false;
        }, 400);
      }
    }
  },
  mounted() {
    const that = this;
    window.onresize = () => {
      return (() => {
        // window.screenHeight = document.body.clientHeight
        // that.screenHeight = window.screenHeight
        that.screenHeight = document.body.clientHeight;
      })();
    };
    this.jisuanheight();
  },
  methods: {
    jisuanheight() {
      let parent = this.$refs.commonLayout;
      parent.style.setProperty("height", "100%");
      // 获取元素实际需要占据的高度
      let height = parent.scrollHeight - 60;
      let zhactbar = this.$slots.zhactbar;
      if (!zhactbar) {
        height = height + 60;
      }
      // 判断是否使用农场类型插槽,动态设置高度
      let farmtypenode = this.$slots.farmtypeselectslot;
      if (farmtypenode) {
        parent.style.setProperty("height", height - 50 + "px");
      } else {
        parent.style.setProperty("height", height + "px");
      }
    }
  }
};
</script>
<style scoped lang="scss">
@import "~@/styles/variables.scss";
.staff-manage {
  width: 100%;
  height: 100%;
  .common-layout {
    border: 1px solid $borderColor;
    height: calc(100% - #{$actionBarHeight + 60});
    margin-top: 5px;
    padding: 20px;
    .searchbox {
      display: flex;
      align-items: center;
      margin-left: 20px;
      .label-input {
        display: flex;
        align-items: center;
        .label {
          width: 100px;
          white-space: nowrap;
        }
      }
      .search {
        display: flex;
        align-items: center;
        cursor: pointer;
        img {
          height: 30px;
        }
      }
    }
    .content {
      height: calc(100% - 50px);
      margin: 20px 0;
      display: flex;
      .box-left {
        position: relative;
        height: 100%;
        width: 50%;
        overflow-y: auto;
        // margin-left: 20px;
        margin-right: 20px;
      }
      .box-right {
        position: relative;
        width: calc(50% - 20px);
        overflow-y: auto;
        flex-direction: column;
        height: 100%;
        border-left: 1px dashed $borderColor;
        padding-left: 20px;
        // display: flex;
        // justify-content: center;
        ::v-deep .el-form {
          .el-form-item {
            width: 100%;
            display: flex;
            justify-content: center;
            .el-form-item__content {
              width: calc(100% - 100px);
              color: #000;
            }
          }
        }
      }
    }
    // 弹出框  统一样式
    ::v-deep .el-dialog__wrapper {
      // background-color: rgba(124, 143, 143, 0);
      .el-dialog {
        background-color: rgba(240, 243, 247, 1);
        // width: 55% !important;
        border: #000 1px solid;
        border-radius: 9px;
        overflow: hidden;
        color: #000;
        .el-dialog__header {
          width: 100%;
          background-color: rgba(0, 110, 145, 1);
          padding: 15px;
          .el-dialog__title {
            font-weight: 700;
          }
          .el-dialog__close {
            font-size: 22px;
            color: #fff;
            font-weight: 700;
          }
        }
        .el-dialog__body {
          // overflow: hidden;
          overflow-y: auto;
          .el-input__inner {
            color: #000;
            border-color: rgba(217, 217, 217, 1);
            background-color: rgba(255, 255, 255, 1);
          }
          .el-textarea__inner {
            color: #000;
            border-color: rgba(217, 217, 217, 1);
            background-color: rgba(255, 255, 255, 1);
          }

          .el-table {
                max-height: 50vh;
                overflow-y: auto;
                background-color: rgba(255, 255, 255, 1);
          }
          .el-form {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            .total-price {
              color: #000;
            }
            .el-row {
              width: 100%;
              margin-bottom: 10px;
              .el-table {
                max-height: 50vh;
                overflow-y: auto;
                background-color: rgba(255, 255, 255, 1);
                .cell {
                  color: #000;
                }
                th {
                  background-color: rgba(230, 230, 230, 1);
                }
                th.is-leaf {
                  border-color: rgba(77, 77, 77, 1);
                }
                td {
                  border-color: rgba(77, 77, 77, 1);
                }
                tr:hover {
                  background-color: rgba(77, 77, 77, 1);
                }
                .el-table__empty-text {
                  color: #000;
                }
                .current-row {
                  // background-color: rgb(177, 177, 177);
                  background-color: #dbdbdb !important;
                }
                .el-table__row--striped {
                  background-color: rgba(255, 255, 255, 1);
                }
                // color: #000;
              }
              .el-table--border {
                border-color: rgba(77, 77, 77, 1);
                border-top-left-radius: 8px;
                border-top-right-radius: 8px;
              }
              .el-table--enable-row-hover .el-table__body tr:hover > td {
                background-color: rgb(177, 177, 177);
              }
              .el-table__body tr.current-row > td {
                background-color: #dbdbdb !important;
              }
              // .el-button {
              //   width: 100%;
              // }
              .el-form {
                // width: 100%;
                // margin: ;
                .el-form-item {
                  margin-bottom: 0 !important;
                }
                .el-form-item__content {
                  display: flex;
                  width: 100%;
                  .el-select {
                    min-width: 15%;
                  }
                  .el-input {
                    min-width: 10%;
                  }
                  .el-input__inner {
                    border-right: none;
                  }
                  .el-button {
                    min-width: 5%;
                    margin-left: 10px;
                  }
                }
              }
            }
            .el-form-item {
              display: flex;
              .el-form-item__label {
                line-height: 36px;
                min-width: 120px;
                text-align: end;
              }
              .el-form-item__content {
                line-height: 36px;
                width: 100%;
                display: flex;
              }
            }
          }
        }
        .el-dialog__footer {
          width: 100%;
          border-top: 1px solid rgba(191, 191, 191, 1);
          position: inherit;
          text-align: right;
          padding: 15px;
        }
        .el-form-item__label {
          color: #000;
          font-weight: 400;
          font-size: 16px;
        }
      }
    }
  }
}
</style>
